<!DOCTYPE html>
<html lang="en">
<head>
    <style type="text/css">
        .zhezhao {
            position: fixed;
            left: 0px;
            top: 0px;
            background: #000;
            width: 100%;
            height: 100%;
            opacity: 0.5;
        }

        .tankuang {
            position: relative;
            background: #fff;
            width: 30%;
            height: 30%;
            border-radius: 5px;
            margin: 5% auto;
        }

        #header {
            height: 40px;
        }

        #header-right {
            position: absolute;
            width: 25px;
            height: 25px;
            border-radius: 5px;
            background: red;
            color: #fff;
            right: 5px;
            top: 5px;
            text-align: center;
        }

    </style>
    <meta charset="UTF-8">
    <title>home页面</title>
    <base href="http://127.0.0.1:8000/" target="_blank">

</head>
<body>
<!--这是一段注释。extends继承basepage.html页面-->
{% extends "Photography/basepage.html" %}
{% block content %}
    <p>
        <input type="submit" id="button" value="添加相册">
        <button type="button">Click Me!</button>
    </p>
    <button type="button" onclick="dianwo()">点我</button>
    <div class="zhezhao" id='zhezhao'>
        <div class="tankuang">
            <div id="header">
                <span>新增相册</span>
                <div id="header-right" onclick="hidder()">x</div>
                <div class="container">
                    <label>请选择一个图像文件：</label>
                    <button id="select">(重新)选择图片</button>
                    <button id="add">(追加)图片</button>
                    <input type="file" id="file_input" multiple/>
                    <button id="submit_picture">提交</button>
                </div>

            </div>
        </div>
    </div>
    <script type="text/javascript">
        document.getElementById('zhezhao').style.display = "none";

        function dianwo() {
            document.getElementById('zhezhao').style.display = "";
        }

        function hidder() {
            document.getElementById('zhezhao').style.display = "none";
        }
    </script>
{% endblock content %}
</body>
</html>
